<template>
  <div shadow="never" class="bar border-none"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "bar",
  props: ["data"],
  data() {
    return {
      chart: null,
      five: [],
      fiveBig: [],
      totalData: [],
    };
  },
  watch: {
    data() {
      this.initChart();
    },
  },
  methods: {
    initChart() {
      this.data.yAxisData.forEach((v) => {
        let a = "";
        let b = "";
        if (v > 500) {
          a = 500;
          b = v - 500;
        }
        this.five.push(a);
        this.fiveBig.push(b);
        this.totalData.push(a + b);
      });
      this.chart = echarts.init(document.getElementById("myChart"));
      let option = {
        tooltip: {
          trigger: "axis",
        },
        grid: [
          {
            //设置边距
            left: 30,
            bottom: 20,
            top: 50,
            right: 10,
          },
        ],
        legend: {
          top: 5,
          right: 5,
          data: ["0-500", "500-1000"],
          textStyle: {
            //图例文字的样式
            color: "#ccc",
          },
        },
        xAxis: [
          {
            type: "category",
            data: this.data.xAxisData,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            show: false,
            splitLine: {
              show: false,
              lineStyle: {
                //type: 'dashed',
                color: "#CDDDE0",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#789C9E",
              },
            },
          },
        ],
        series: [
          {
            name: "总计",
            type: "bar",
            stack: "",
            label: {
              normal: {
                show: true,
                position: "top",
                // padding:[0,0,35,0],
                color: "#fff",
              },
            },
            z: -1,
            itemStyle: {
              normal: {
                color: "rgba(128, 128, 128, 0)",
              },
            },
            barGap: "-100%",
            data: this.totalData,
          },
          {
            // 上层块
            name: "", // blue bar
            type: "pictorialBar",
            symbol: "rect",
            barWidth: "40%", //柱图宽度
            symbolOffset: [-8, -2],
            barMaxWidth: "20%", //最大宽度
            itemStyle: {
              normal: {
                position: "top",
                color: "rgb(5,38,100)",
              },
            },
            z: -999,
            // barGap: "-100%",
            barGap: 90, //柱子的“粗细”
            data: [900, 900, 900],
          },
          {
            name: "500-1000",
            type: "pictorialBar", //设置类型为象形柱状图
            symbol: "rect", //图形类型，带圆角的矩形
            barWidth: "20%", //柱图宽度
            barMaxWidth: "10%", //最大宽度
            symbolMargin: "0.5", //图形垂直间隔
            itemStyle: {
              normal: {
                color: "rgb(255,212,0) ",
              },
            },
            z: 1,
            symbolRepeat: true, //图形是否重复
            symbolSize: [25, 6], //图形元素的尺寸
            data: this.data.yAxisData, //Y轴数据
          },
          {
            name: "0-500",
            type: "pictorialBar", //设置类型为象形柱状图
            symbol: "rect", //图形类型，带圆角的矩形
            barWidth: "20%", //柱图宽度
            barMaxWidth: "10%", //最大宽度
            symbolMargin: "0.5", //图形垂直间隔
            itemStyle: {
              normal: {
                color: "rgb(6,242,240)",
              },
            },
            z: 1,
            symbolRepeat: true, //图形是否重复
            symbolSize: [25, 6], //图形元素的尺寸
            data: this.five, //Y轴数据
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>
